<template lang="html">
  <div id="payment">
    <div class="wpr box">
      <h4>
        <i class="el-icon-location-outline"></i><br/>
        北京市大兴区荣京家园1栋1单元206室
        <small>（2016/10/10-2017/03/20）</small>
      </h4>
      <div v-if="!!present.termNo" class="wraning text-c">
          第{{ present.termNo }}期还款金额<br/>
          <var>{{ present.totalAmt }}</var>元<br/>
          <el-button type="warning is-round" @click="$router.push({name:'pay',params:{orderId:present.id}})"><span>立即还款</span></el-button>
      </div>
      <div v-else class="wraning text-c">
        暂无要还的款项
      </div>

      <div v-for="(item, index) in repayArr">
        <h5>第{{ index+1 }}期</h5>
        <div class="stable">
          <div class="session">
            <div class="tit flex">
              <span>2016/10/10-2016/11/10</span>
              <div>
                <var v-if="item.status == 0" class="el-tag--info">待审核</var>
                <var v-if="item.status == 1" class="el-tag--warning">待还</var>
                <var v-if="item.status == 2" class="el-tag--success">已还</var>
                <var v-if="item.status == 3" class="el-tag--danger">逾期</var>
              </div>
            </div>
            <div v-if="item.status == 1 || item.status == 3" class="wpr flex">
              <div><span>还款日期</span>{{ item.repayDate }}</div>
              <div><span>还款总金额</span>{{ item.totalAmt }}</div>
              <div><span>还款本金</span>{{ item.principalAmt }}</div>
              <div><span>还款利息</span>{{ item.interestAmt }}</div>
              <div><span>逾期手续费</span>{{ item.overdueAmt }}</div>
              <!-- <div><span>已支付</span>2000.00</div> -->
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="fixBtnShim"></div>
    <!-- <a :href="'../xieyi.html?userId='+ userId + '&orderId=' +orderId" style="background-color:#999" class="fixBtn">查看电子合同（外链）</a> -->
    <a href="javascript:void(0)" style="background-color:#999" class="fixBtn" @click='toLinkOut'>查看电子合同（外链）</a>
  </div>
</template>

<script>
import { mapState, mapMutations,mapActions} from 'vuex'

export default {
  data() {
    return {
      userId:'',
      repayArr:[],
      present:{},
      orderId:''
    }
  },
  beforeCreate(){
    this.$store.commit('starLoading');
    this.setTit('还款')
  },
  created(){
    let session = this.$route.query.session,
        b = eval('(' + session + ')');
        if(!!b == false){
          this.userId == !!b;
          return;
        }
        this.userId = b.userId;
        if(!!b){
          this.$store.commit('revise',b)
        }else{
          this.$router.push({name:'404'})
        }

  },
  methods:{
    ...mapActions([
      'userOrder_getOrder'
    ]),
    toLinkOut(){
      window.location.href = 'http://amgmh.gitee.io/luckystar/xieyi.html?userId='+ this.userId + '&orderId=' + this.orderId
    }
  },
  async beforeMount() {
    this.$store.commit('starLoading');
    if(!this.userId){
      this.$store.commit('closeLoading');
      this.$router.push({name:'noAgree'});
      return;
    }

    this.userI = await this.userOrder_getOrder({phonenumber:this.$store.state.User.info.mobile});
    let res = await this.$store.dispatch('getInstalmentOrder',{orderId:this.userI.id});
    // let res = await this.$store.dispatch('getInstalmentOrder',{orderId:20180123140112100000});
    this.repayArr = res.list;
    console.log('this.userI.id',this.userI.id);

    this.orderId = this.userI.id;
    this.present = res.present;
    this.$store.commit('closeLoading');
    console.log(res);
    // repayArr =
    // this.$store.dispatch('getInstalmentOrder',{})
  }
}
</script>

<style lang="scss">
#payment{
  .wpr{padding:0 .4rem;}
  h4{
    text-align: center;font-size: .28rem;margin-bottom: .4rem;color:#333;line-height: 1.4;
    i{font-size: 1.26rem;color:#ec5f51;margin:.56rem 0 .12rem; }
    small{display: block;font-size:inherit;color:#666;}
  }
  .el-button--warning{font-size: .3rem;background-color: #f5cc3f;border-color: #f5cc3f;line-height: .6rem;padding:0 .56rem;margin-top:.1rem;}
  .wraning{
    font-size: .22rem;color:#333;line-height: 1.4;border-top: .02rem #efefef solid;padding-top: .3rem;
    var{color:#ec5f51;font-size: .5rem;}
  }
  h5{color:#999;font-size: .28rem;text-indent: .2rem;line-height: .64rem;background-color: #f2f2f2;font-weight: bold;margin:.35rem 0;}
  .stable{padding:0 .54rem .06rem;color:#666;}
  .session .tit{justify-content: space-between;}
  .session .wpr{
    flex-wrap:wrap;margin-top:.2rem;line-height: .36rem;padding:.1rem 0 .1rem  .22rem;margin-left:.46rem;border-left:.02rem #ec5f51 solid;
    color:#999;font-size: .2rem;
    &>div{
      span{display: inline-block;padding:0 .08rem 0 .18rem;}
    }
  }

}
</style>
